<template>
  <div class="c-p c-bg-sgray">
    <watermark
      v-if="showExamWatermark"
      :watermarkContent="examWatermarkConfig && examWatermarkConfig.contentType == 2 ? examWatermarkConfig.content : ''"
      :fontSize="examWatermarkConfig && examWatermarkConfig.size ? examWatermarkConfig.size : 14"
      :contentFillStyle="examWatermarkConfig && examWatermarkConfig.color ? examWatermarkConfig.color : '#999999'"
      :opacityNum="examWatermarkConfig ? examWatermarkConfig.transparent / 100 : 0.3"
    ></watermark>
    <!-- 从练习中抽取题目，有可能练习中该题后面被删除了 -->
    <audio id="audio" preload="auto" @error="playAudioError" @ended="playAudioEnd" @onPlayTimeChange="onPlayTimeChange" :curPlayTime="audioPlayTime" class="c-pf c-p-l-100"></audio>
    <audio id="nextAudio" preload="auto" class="c-pf c-p-l-100"></audio>
    <audio
      id="ancyaudio"
      preload="auto"
      @error="ancyPlayAudioError"
      @ended="ancyPlayAudioEnd"
      @onPlayTimeChange="ancyOnPlayTimeChange"
      :curPlayTime="ancyaudioPlayTime"
      class="c-pf c-p-l-100"
    ></audio>
    <audio id="audioSelf" @ended="playAudioSelfEnd" class="c-pf c-p-l-100"></audio>
    <div class="copyNot examAnswer c-p">
      <div class="c-ph64 c-bd-b1 c-flex-row c-aligni-center  c-bg-white">
        <section class="c-flex-row c-aligni-center c-justify-sb c-hh72 c-flex-grow1">
          <div class="tab-item c-p c-flex-row c-h c-flex-shrink0 c-flex-center" v-for="(item,index) in tabList" :key="index" @click="changeType(item.index)">
            <div class="c-fs24" :class="typeBar == item.index?'theme-fc c-fw-b':'c-fc-sblack'">{{item.name}}</div>
            <div v-show="typeBar == item.index" class="tab-icon theme-bg"></div>
          </div>
        </section>
      </div>
      <div v-if="questionInfo!=null">

        <section class="c-pb130" v-if="questionInfo.type">
          <div class=" c-bg-white c-br-br16 c-br-bl16">
            <div class="c-fs26 c-fw-b c-pt32 c-ph32 c-fc-xblack c-flex-row c-aligni-center c-justify-sb">
              <div class="c-fs26 c-fc-xblack c-flex-grow1 c-fw-b">
                {{questionInfo.questionTypeName}}
                <span>{{questionInfo.number}}/{{allNumber}}</span>
              </div>
            </div>
            <div v-if="questionInfo.qTypeRemarks" class="c-ph24 c-fc-gray c-fs20 c-pt16">{{questionInfo.qTypeRemarks}}</div>
            <div v-show="questionInfo.status!=-1">
              <!-- 视频题 -->
              <div class="c-fs28 c-fc-xblack c-ph24 c-pb24 c-pt32" v-if="(questionInfo.resourceType==1||questionInfo.resourceType==2)&&questionInfo.resourceUrl!=''">欣赏下面片段作答 。</div>
              <section v-show="questionInfo.resourceType==1&&questionInfo.resourceUrl!=''" class="c-ph24 c-hh360 c-p">
                <div id="liveVideoIntroParent" class="c-w100-im"></div>
                <div v-show="!playing" class="c-pa c-p-l0 c-p-t0 c-p-r0 c-h c-flex-row c-aligni-center c-justify-center c-mh24 c-pz100 c-bg-black" @click="Videoplay">
                  <span class="iconfont c-fc-white c-fs100">&#xe869;</span>
                </div>
                <div class="c-p-l0 c-pa c-ph16 c-p-t0 c-w100 c-h c-pz100" v-if="questionInfo.assetStatus==-1">
                  <div class="c-br8 c-translucent-balck60 c-w100 c-h">
                    <div class="iconfont c-fc-white c-fs108 c-textAlign-c c-pt100">&#xe963;</div>
                    <div class="c-fs24 c-fc-f2 c-textAlign-c">该视频已被管理员删除，如有疑问请咨询客服</div>
                  </div>
                </div>
              </section>
              <!-- 音频题 -->
              <section v-show="questionInfo.resourceType==2&&questionInfo.resourceUrl!=''" class="c-ph24">
                <div class="c-bg-xgreen c-flex-row c-aligni-center c-br8 c-ph16 c-p">
                  <div class="c-mr30 c-ww54"><img class="c-w100" src="@/assets/i/wap/exam/voice_icon.png" alt=""></div>
                  <div class="c-flex-grow1 c-mr48">
                    <div class="c-fc-white c-fs20 c-mt14 c-mb10 c-maxw440">{{questionInfo.resourceName}}</div>
                    <vue-slider class="audioPlay" :height="2" :processStyle="processStyle" :railStyle="railStyle" :dotOptions="dotOptions" v-model="audioPlayTime" tooltip="none" :lazy="true" :max="duration"
                      @drag-start="dragStart" @dragging="dragging" @drag-end="dragEnddragEnd" @change="inputChange">
                      <template slot="dot">
                        <div class="dot-inner c-ww22 c-hh22 c-brp50"><span class="c-ww22" style="text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></span></div>
                      </template>
                    </vue-slider>
                    <div class="c-flex-row c-aligni-center c-justify-sb c-fs16 c-fc-white c-mt5 c-pb15">
                      <div>{{playtime}}</div>
                      <div>{{playtotalTime}}</div>
                    </div>
                  </div>
                  <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="showFirstSpeak" @click="firstPlay">&#xe8ed;</div>
                  <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="!showLoudspeaker&&!showFirstSpeak" @click="replay">&#xe8ed;</div>
                  <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="showLoudspeaker && !showFirstSpeak" @click="pause">&#xe8ef;</div>
                  <div v-if="questionInfo.assetStatus==-1" class="c-flex-row c-aligni-center c-br8 c-ph16 c-pa c-translucent-balck60 c-p-t0 c-pz10 c-p-l0 c-w100 c-h">
                    <div class="iconfont c-fc-white c-fs40">&#xe963;</div>
                    <div class="c-fs24 c-fc-f2 c-ml16">该音频已被管理员删除，如有疑问请咨询客服</div>
                  </div>
                </div>
              </section>
              <div class="c-pb22 c-fs28 c-pt28 c-ph32" v-if="questionInfo.type != 9">
                <span class="fl c-lh46">{{questionInfo.paperInfo && questionInfo.paperInfo.testPaperType && questionInfo.paperInfo.testPaperType == 2 ? questionInfo.number : questionInfo.number2}}</span>
                <span class="copyNot c-lh46 imgInlineb problemdDom" @click="clickDesc" v-html="questionInfo.problem"></span>
              </div>
              <div class="c-ph24 c-pb20" v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4|| questionInfo.smallType==1|| questionInfo.smallType==2|| questionInfo.smallType==4">
                <div v-for="(item,index) in optionsList" :key="index" class="c-aligni-center c-flex-row c-pv20 c-fs24 c-mh90 c-br20 c-mb24 c-ph24"
                  :class="
                    item.isSelected == 1?'analysisUser':
                    item.isSelected == 3?'theme-bd2 theme-bg-10':
                    item.isSelected == 2?' analysisRight':
                    'c-bd2-mgray'">
                  <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c"
                    :class="[
                      item.isSelected == 2?'analysisTypeRight':
                      item.isSelected == 1?'analysisTypeUser':
                      item.isSelected == 3?'theme-bg c-fc-white':
                      'c-bg-sgray c-fc-xblack',questionInfo.realType != 2&&questionInfo.realType != 2?'c-brp50':'']"
                  >
                    {{item.type}}
                  </div>
                  <div class="c-pl20 c-lh50 copyNot imgInlineb c-textAlign-j problemdDom" @click="clickDesc" v-html="item.name"></div>
                </div>
              </div>
              <div v-if="questionInfo.type == 9">
                <div class="c-ph24 c-pb40 c-fs28 c-pt28">
                  <span class="fl  c-lh40">{{questionInfo.number2}}</span>
                  <span class="copyNot c-lh40 imgInlineb problemdDom" @click="clickDesc" v-html="questionInfo.bigProblem"></span>
                </div>
                <div class="c-ph24">
                  <div class="c-br8 c-pb40">
                    <div class="c-pb32">
                      <div class="c-flex-row c-aligni-center c-justify-sb c-fs20">
                        <div class="c-pv2 c-ph8 c-br4 c-ws-n theme-fc theme-bg-10">
                          {{questionInfo.realType==1?'单选题':(questionInfo.realType==2?'多选题':(questionInfo.realType==3?"问答题":(questionInfo.realType==4?"判断题":(questionInfo.realType==5?"填空题":""))))}}
                        </div>
                        <div class="c-inlineblack c-pv2 c-ph8 c-fc-gray c-fs24">{{questionInfo.smallNumber + '/' + questionInfo.hasSmallNum}}</div>
                      </div>
                      <div class="c-mt24">
                        <span class="fl c-lh36 c-fs28">{{questionInfo.smallNumber}}.</span>
                        <div class="c-fs28 c-l40 c-fc-xblack imgInlineb problemdDom" @click="clickDesc" v-html="questionInfo.problem"></div>
                      </div>
                    </div>
                    <div v-if="questionInfo.realType==1 || questionInfo.realType==2 || questionInfo.realType==4">
                      <div v-for="(item,index) in optionsList" :key="index" class="c-flex-row c-aligni-center c-pv20 c-fs24 c-mh90 c-br20 c-mb24 c-ph24"
                        :class="
                          item.isSelected == 1?'analysisUser':
                          item.isSelected == 3?'theme-bd2 theme-bg-10':
                          item.isSelected == 2?' analysisRight':
                          'c-bd2-mgray'">
                        <div class="op-type c-ww50 c-hh50 c-brp50 c-lh50 c-textAlign-c"
                          :class="[
                            item.isSelected == 2?'analysisTypeRight':
                            item.isSelected == 1?'analysisTypeUser':
                            item.isSelected == 3?'theme-bg c-fc-white':
                            'c-bg-sgray c-fc-xblack',questionInfo.realType != 2&&questionInfo.realType != 2?'c-brp50':'']">
                          {{item.type}}
                        </div>
                        <div class="c-pl20 c-lh50 copyNot imgInlineb c-textAlign-j problemdDom" @click="clickDesc" v-html="item.name"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-mt24 ">
            <div class="c-bg-white c-br16 c-pt24 c-pb24 c-ph24 ">
              <div class="c-flex-row c-aligni-center">
                <img class="c-ww28 c-hh18" src="@/assets/i/wap/exam/leftAnser.png" alt="">
                <div class="c-fc-xblack c-fs26 c-fw500 c-ml10">{{
                  (questionInfo.type==3|| questionInfo.smallType==3 || (questionInfo.type==9 && questionInfo.realType==3))||
                    (questionInfo.type==5|| questionInfo.smallType==5 || (questionInfo.type==9 && questionInfo.realType==5))||questionInfo.type==11?"我的答案":"答案"}}</div>
              </div>

              <div :class="questionInfo.isAnalysis==1?'':'c-pb130'">
                <div class="c-mt20 c-pb24" v-if="questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4|| questionInfo.smallType==1|| questionInfo.smallType==2|| questionInfo.smallType==4 || (questionInfo.type==9 && (questionInfo.realType==1 || questionInfo.realType==2 || questionInfo.realType==4))">
                  <div class="c-flex-row ">
                    <div class="c-fs24 c-fc-xblack copyNot c-fs26 c-fc-1b c-fw-b" v-if="questionInfo.enableShowAnswer==2||(questionInfo.enableShowAnswer==1&&questionInfo.examIsCheck==1)">
                      正确答案<b class="c-ml8 c-fc-send-green">{{
                        questionInfo.type == 4 ||
                          questionInfo.smallType == 4 ||
                          questionInfo.realType == 4
                          ? questionInfo.answer == 1
                            ? "正确"
                            : "错误"
                          : questionInfo.answer
                      }}</b>
                    </div>
                    <div class="c-fs24 copyNot c-fs26 c-fc-1b c-fw-b c-ml80">我的答案<b class="c-ml8" :class="questionInfo.realType == 4 ||questionInfo.type == 4 || questionInfo.smallType == 4||(questionInfo.type==9 && questionInfo.realType==4)
                      ? (questionInfo.answer == 1 && userAnswerTxt == '正确') ||
                        (questionInfo.answer == -1 && userAnswerTxt == '错误')
                        ? 'c-fc-send-green'
                        : 'c-fc-reword'
                      : questionInfo.answer == userAnswerTxt
                        ? 'c-fc-send-green'
                        : 'c-fc-reword'
                    ">{{ userAnswerTxt == "" ? "未答题" : userAnswerTxt }}</b></div>
                  </div>
                </div>
                <div class="c-mt20 c-mb20" v-if="questionInfo.type==5|| questionInfo.smallType==5 || (questionInfo.type==9 && questionInfo.realType==5)">
                  <section v-if="hasAnswer">
                    <div class="c-flex-row c-mt24 c-aligni-center" v-for="(item,index) in questionInfo.userAnswer" :key="index">
                      <div class="c-fs24 c-fc-xblack c-mr8 c-flex-row c-flex-center">{{index + 1}}.</div>
                      <div class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10" :class="fbAnswerStyle[index] == 'right' ? 'rightClass' : fbAnswerStyle[index] == 'wrong' ? 'c-fc-reword' : ''">{{item.value.trim() == ''?'未答题':item.value}}</div>
                    </div>
                  </section>
                  <div v-else class="c-fs24 c-fc-xblack c-mt24">未答题</div>
                </div>
                <div class="c-mt20 c-mb20" v-if="questionInfo.type==3|| questionInfo.smallType==3 || (questionInfo.type==9 && questionInfo.realType==3)">
                  <div class="c-fs24 c-fc-xblack c-mt14 c-pv16 copyNot" v-if="(questionInfo.userAnswer != '' && questionInfo.userAnswer != null) || imgArr.length == 0">{{questionInfo.userAnswer=='' || questionInfo.userAnswer==null ? '无' : questionInfo.userAnswer}}</div>
                  <div class="c-pt30 c-flexw-wrap c-flex-row" v-if="imgArr.length > 0">
                    <div v-for="(item,index) in imgArr" :key="index" class="c-ww160 c-hh160 c-mb30 c-flex-row c-flex-center c-p " :class="index % 3 == 0 ? '':'c-ml20'">
                      <img @click="clickPreviewImage(item)" class="c-ww160 c-hh160" :src="$addXossFilter(item)" alt="" />
                    </div>
                  </div>
                  <div class="c-flex-row c-flexw-wrap c-pt30" v-if="uploadAudioList.length > 0">
                    <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in uploadAudioList" :key="index" :class="index % 3 == 0 ? '' : 'c-ml20'" class="c-ww160 c-hh60 c-br30 theme-bg c-pl24 c-pr10 c-p c-flex-row c-aligni-center c-mb30">
                      <div class="box c-ww32">
                        <div class="wifi-symbol">
                          <div class="wifi-circle first c-bd2-white"></div>
                          <div class="wifi-circle second c-bd2-white" :class="playAduioSrc == item.url?'seconAnimation':''"></div>
                          <div class="wifi-circle third c-bd2-white" :class="playAduioSrc == item.url?'thirdAnimation':''"></div>
                        </div>
                      </div>
                      <div class="c-fs20 c-fc-white">{{item.time}}"</div>
                    </div>
                  </div>
                </div>
                <div class="c-mt20 c-mb20" v-if="questionInfo.type==11">
                  <section>
                    <span v-for="(item,index) in questionInfo.userAnswer" :key="index" :class="(questionInfo.enableShowAnswer==1&&questionInfo.examIsCheck==-1)?'c-fc-xblack':questionInfo.answer[index]&&item.value==questionInfo.answer[index].value ? 'c-fc-send-green' : 'c-fc-reword'" class="c-fs24 c-mr10 copyNot c-fs26">
                      {{item.value == ''?'未答题':item.value}}{{questionInfo.userAnswer.length-1==index?'':","}}
                    </span>
                  </section>
                </div>
                <div class="c-fs26 c-fc-xblack" v-if="questionInfo.enableShowAnswer==2||(questionInfo.enableShowAnswer==1&&questionInfo.examIsCheck==1)">
                  <div class="c-bg-xmorange c-br12 c-flex-row c-justify-sb c-ph24 c-pv20">
                    <div class="c-flex-row c-aligni-center">
                      <div class="c-ww36"><img src="@/assets/i/wap/exam/scor.png" alt=""></div>
                      <div class="c-fs24 c-fc-1b c-ml12 c-fc-sorange">学员得分：</div>
                    </div>
                    <div class="c-fs24 c-fc-sorange">{{questionInfo.resultScore}} 分</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="c-ph24 c-mt24 c-bg-white c-br16 c-pt24 c-pb24" v-show="(questionInfo.enableShowAnswer==2||
              (questionInfo.enableShowAnswer==1&&questionInfo.examIsCheck==1))&&(
              (questionInfo.type==3|| questionInfo.smallType==3 || (questionInfo.type==9 && questionInfo.realType==3))||
              (questionInfo.type==5|| questionInfo.smallType==5 || (questionInfo.type==9 && questionInfo.realType==5))||questionInfo.type==11)">
              <div class="c-flex-row c-aligni-center">
                <img class="c-ww28 c-hh18" src="@/assets/i/wap/exam/leftAnser.png" alt="">
                <div class="c-fc-xblack c-fs26 c-fw500 c-ml10">正确答案</div>
              </div>
              <div>
                <div class="c-mt34" v-if="questionInfo.type==3|| questionInfo.smallType==3 || (questionInfo.type==9 && questionInfo.realType==3)">
                  <div class="tiny-style tinymce-text c-mt14 c-text-indent50 c-ww-bw c-contexty-scroll c-ph10 copyNot c-textAlign-j problemdDom" @click="clickDesc" v-html="questionInfo.rightAnswer"></div>
                </div>
                <div class="c-mt34" v-if="questionInfo.type==5|| questionInfo.smallType==5 || (questionInfo.type==9 && questionInfo.realType==5)">
                  <div class="c-flex-row c-mt24 c-aligni-center" v-for="(item,index) in questionInfo.rightAnswer" :key="index">
                    <div class="c-fs24 c-fc-xblack c-mr8 c-flex-row c-flex-center">{{index + 1}}.</div>
                    <div class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10">{{item.value.trim() == ''?'未答题':item.value}}</div>
                  </div>
                </div>
                <div class="c-mt34" v-if="questionInfo.type==11">
                  <span v-for="(item,index) in questionInfo.rightAnswer" :key="index" class="c-fs24 c-fc-xblack c-flex-grow1 c-mr10 right">
                    {{item.value.trim() == ''?'未答题':item.value}}{{questionInfo.rightAnswer.length-1==index?'':","}}
                  </span>
                </div>
              </div>
            </div>
            <div class="c-ph24 c-mt24 c-bg-white c-br16 c-pt24 c-pb24" v-if="questionInfo.isCheck!=-1&&(questionInfo.type==3|| questionInfo.smallType==3 || (questionInfo.type==9 && questionInfo.realType==3))">
              <div class="c-flex-row c-aligni-center">
                <img class="c-ww28 c-hh18" src="@/assets/i/wap/exam/leftAnser.png" alt="">
                <div class="c-fc-xblack c-fs26 c-fw500 c-ml10">老师点评</div>
              </div>
              <div class="c-fs24 c-fc-xblack c-mt14 c-text-indent50 copyNot c-textAlign-j problemdDom" @click="clickDesc" v-html="(questionInfo.remark==null||questionInfo.remark=='')?'无':questionInfo.remark"></div>
            </div>
            <!-- 解析 -->
            <div class="c-ph24 c-mt24 c-bg-white c-br16 c-pt24 c-pb24" v-show="questionInfo.isAnalysis==1">
              <div class="c-flex-row c-aligni-center">
                <img class="c-ww28 c-hh18" src="@/assets/i/wap/exam/leftAnser.png" alt="">
                <div class="c-fc-xblack c-fs26 c-fw500 c-ml10">答案解析</div>
              </div>
              <div
                class="c-fs24 c-fc-xblack c-mt14 c-text-indent50 copyNot c-textAlign-j problemdDom"
                v-show="questionInfo.analysis != '' && questionInfo.analysis != ' '"
                @click="clickDesc"
                v-html="questionInfo.analysis"
              ></div>
              <!-- 视频解析 -->
              <section v-show="questionInfo.analysisRtype==1&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-hh360 c-p c-mt14">
                <div id="ancyVideoIntroParent" class="c-w100-im"></div>
                <div v-show="!ancyPlaying" class="c-pa c-p-l0 c-p-t0 c-p-r0 c-h c-flex-row c-aligni-center c-justify-center c-pz100 c-bg-black" @click="VideoplayAncy">
                  <span class="iconfont c-fc-white c-fs100">&#xe869;</span>
                </div>
                <div class="c-p-l0 c-pa c-ph16 c-p-t0 c-w100 c-h c-pz100" v-if="questionInfo.analysisAssetStatus==-1">
                  <div class="c-br8 c-translucent-balck60 c-w100 c-h">
                    <div class="iconfont c-fc-white c-fs108 c-textAlign-c c-pt100">&#xe963;</div>
                    <div class="c-fs24 c-fc-f2 c-textAlign-c">该视频已被管理员删除，如有疑问请咨询客服</div>
                  </div>
                </div>
              </section>
              <!-- 音频解析 -->
              <section v-show="questionInfo.analysisRtype==2&&questionInfo.analysisRurl!=''&&questionInfo.analysisRurl" class="c-mt14">
                <div class="c-bg-xgreen c-flex-row c-aligni-center c-br8 c-ph16 c-p">
                  <div class="c-mr30 c-ww54"><img class="c-w100" src="@/assets/i/wap/exam/voice_icon.png" alt=""></div>
                  <div class="c-flex-grow1 c-mr48">
                    <div class="c-fc-white c-fs20 c-mt14 c-mb10 c-maxw440">{{questionInfo.analysisRname}}</div>
                    <vue-slider class="audioPlay" :height="2" :processStyle="processStyle" :railStyle="railStyle" :dotOptions="dotOptions" v-model="ancyaudioPlayTime" tooltip="none" :lazy="true" :max="ancyduration"
                      @drag-start="ancydragStart" @dragging="ancydragging" @drag-end="ancydragEnddragEnd" @change="ancyinputChange">
                      <template slot="dot">
                        <div class="dot-inner c-ww22 c-hh22 c-brp50"><span class="c-ww22" style="text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);"></span></div>
                      </template>
                    </vue-slider>
                    <div class="c-flex-row c-aligni-center c-justify-sb c-fs16 c-fc-white c-mt5 c-pb15">
                      <div>{{ancyplaytime}}</div>
                      <div>{{ancyplaytotalTime}}</div>
                    </div>
                  </div>
                  <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowFirstSpeak" @click="ancyfirstPlay">&#xe8ed;</div>
                  <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="!ancyshowLoudspeaker&&!ancyshowFirstSpeak" @click="ancyreplay">&#xe8ed;</div>
                  <div class="c-ww52 c-lh26 c-whiteOpcity03 c-textAlign-c c-br12 iconfont c-fs12 c-fc-white" v-if="ancyshowLoudspeaker && !ancyshowFirstSpeak" @click="ancypause">&#xe8ef;</div>
                  <div v-if="questionInfo.analysisAssetStatus==-1" class="c-flex-row c-aligni-center c-br8 c-ph16 c-pa c-translucent-balck60 c-p-t0 c-pz10 c-p-l0 c-w100 c-h">
                    <div class="iconfont c-fc-white c-fs40">&#xe963;</div>
                    <div class="c-fs24 c-fc-f2 c-ml16">该音频已被管理员删除，如有疑问请咨询客服</div>
                  </div>
                </div>
              </section>
              <div
                class="c-fs24 c-fc-xblack c-mt14 c-text-indent50 c-ph10"
                v-if="(questionInfo.analysis == '' || questionInfo.analysis == ' ')&&(questionInfo.analysisRurl==''||!questionInfo.analysisRurl)"
              >
                无
              </div>
            </div>
          </div>


        </section>
        <section v-else>
          <loading-status-tem :noData="true" :noDataText="'暂无数据'"></loading-status-tem>
        </section>

        <loading-status-tem :showLoading="false" :noData="questionInfo.status==-1" :noDataText="'该题目已被删除,请联系管理员'"></loading-status-tem>
        <div class="c-flex-row c-hh90 c-aligni-center c-bd-t1 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1000 c-pl24 c-pr24">
          <div class="c-flex-column c-fs20 c-aligni-center c-justify-center c-h c-mr40 c-fc-sblack" v-if="hasAllCheck&&((questionInfo.type!=3) && (questionInfo.type!=9 || questionInfo.realType!=3))&&questionInfo.collectId==0">
            <div :class="(questionInfo.type==3|| questionInfo.smallType==3 || (questionInfo.type==9 && questionInfo.realType==3)) ? 'c-fc-sgray' : 'c-fc-xblack'" class="c-fs40 iconfont" @click="addWrong">&#xe8af;</div>
            <div>加入错题</div>
          </div>
          <div class="c-flex-column c-fs20 c-aligni-center c-justify-center c-h c-mr40 c-fc-sblack" v-if="hasAllCheck&&((questionInfo.type!=3) && (questionInfo.type!=9 || questionInfo.realType!=3))&&questionInfo.collectId>0">
            <div :class="(questionInfo.type==3|| questionInfo.smallType==3 || (questionInfo.type==9 && questionInfo.realType==3)) ? 'c-fc-sgray' : 'c-fc-xblack'" class="c-fs40 iconfont" @click="cancerWrong">&#xe8ab;</div>
            <div>取消错题</div>
          </div>
          <div v-if="examinationInfo&&examinationInfo.enableShowAnswerCard==1" class="c-flex-column c-fs20 c-aligni-center c-justify-center c-h c-fc-sblack c-mr40" @click="showNewAnswerCard">
            <div class="c-fs40 iconfont c-fc-xblack">&#xe8ad;</div>
            <div>答题卡</div>
          </div>
          <div class="c-flex-grow1 c-hh70 c-w0 c-flex-row c-aligni-center c-justify-center c-br36 c-text-hidden">
            <div class="c-flex-grow1 c-lh70  c-w0 c-textAlign-c c-fs24"
              :class="isBegin||questionInfo==null||questionInfo.length==0 ? 'c-opacity50 c-fw-n theme-fc theme-bg-10' : 'theme-fc c-fw-n theme-bg-10'"
              @click="clickPrev"><span class="iconfont c-fs24 chanDeg  c-mr8">&#xe635;</span>上一题</div>
            <div class="c-flex-grow1 c-lh70 c-w0 c-textAlign-c c-fs24 c-fc-white"
              :class="isOver||questionInfo==null||questionInfo.length==0 ? 'c-opacity50 theme-bg':'theme-bg'"
              @click="clickNext">下一题<span class="iconfont c-fs24 c-ml8">&#xe635;</span></div>
          </div>
        </div>
      </div>
    </div>
    <cj-popup v-model="showCar" :closeable="true" title="答题卡" position="bottom" @closed="hideColumnList" round>
      <div class="c-br-tl20 c-br-tr20 c-bg-white c-ph24">
        <div class="c-flex-row c-fs24 c-fc-sblack c-justify-sb c-aligni-center c-pb24 c-bd-b1-f5">
          <div class="c-flex-row">
            <div class="c-mr48"><span class="c-inlineblack c-ww16 c-hh16 c-brp50 c-bg-reword c-mr8"></span>错误</div>
            <div class="c-mr48"><span class="c-inlineblack c-ww16 c-hh16 c-brp50 c-bg-send-green  c-mr8"></span>正确</div>
            <div class="c-mr48"><span class="c-inlineblack c-ww16 c-hh16 c-brp50  c-mr8 c-bd1-mgray"></span>待评分</div>
          </div>
        </div>
        <div class=" c-minh50vh c-content-scroll c-mt28">
          <div v-if="!randomFlag">
            <div v-for="(item,index) in answerCardList" :key="index" class="c-pb28">
              <div class="c-fc-xblack c-fs24 c-fw500">
                {{item.name}}
              </div>
              <div>
                <span class="c-mt28 c-fs26 c-inlineblack c-ww64 c-hh64 c-brp50  c-lh60 c-textAlign-c" v-for="(items,index) in item.questionList" @click="goAnalysis(items.number,items.examDetailId)" :key="index"
                  :class="[items.isRight==1?'borderRight right':items.isRight==-1?'borderUser worron':'c-bd1-mgray c-bg-sgray c-fc-sblack',(index+1)%5==0?'':'c-mr68']">{{items.number2}}</span>
              </div>
            </div>
          </div>
          <div v-else class="c-pb28">
            <div>
              <span class="c-mt28 c-fs26 c-inlineblack c-ww64 c-hh64 c-brp50  c-lh60 c-textAlign-c" v-for="(item,index) in answerCardList" @click="goAnalysis(item.number2,item.examDetailId)" :key="index"
                :class="[item.isRight==1?'borderRight right':item.isRight==-1?'borderUser worron':'c-bd1-mgray c-bg-sgray c-fc-sblack',(index+1)%5==0?'':'c-mr68']">{{item.number2}}</span>
            </div>
          </div>
        </div>
        <div v-if="answerCardList.length==0">
          <loading-status-tem :pt20='true' :noData="true" :noDataText="'暂无数据'"></loading-status-tem>
        </div>
      </div>
    </cj-popup>
    <cj-popup v-model="showSelectModal" :closeable="true" titleClass="c-bd-b1" :title="'第'+(selectIndex*1+1)+'空'" position="bottom" round v-if="questionInfo&& questionInfo.newOption">
      <div class="c-ph24 c-mt24 c-pb40">
        <div v-for="(item,index) in questionInfo.newOption[selectIndex].options" :key="index" :class="item.isSelected == 0?'c-bd1-mgray':item.isSelected == 2?'analysisRight':item.isSelected == 1?'analysisUser':'c-bd1-mgray'" class="c-flex-row c-aligni-center c-pv20 c-fs24 c-mh90 c-br20 c-mb24 c-ph24">
          <div class="op-type c-ww50 c-hh50 c-lh50 c-textAlign-c c-fw600 c-brp50" :class="item.isSelected == 0 ? 'c-bg-mgray':item.isSelected == 1 ? 'c-bg-reword c-fc-white':item.isSelected == 2 ?'c-bg-send-green c-fc-white':'c-bg-mgray'">{{item.name}}</div>
          <div class="c-pl20 c-lh50 c-wb-ba copyNot imgInlineb c-textAlign-j problemdDom" v-html="item.content"></div>
        </div>
      </div>
    </cj-popup>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js"
import VueSlider from "vue-slider-component";
import watermark from "@/components/templates/common/watermark.vue";
import "vue-slider-component/theme/antd.css";
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
let player = null;
let playTimeControl = null;
let isCanPlay = false
let ancyisCanPlay = false
let ancyplayTimeControl = null;
let ancyPlayer = null;
export default {
  name: "ExaminationAnswerAnalyze",
  components: {
    loadingStatusTem,
    VueSlider,
    watermark
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      questionType: 1, //1:全部问题 2:只看错题
      paperMainId: -1,
      topicId: '',
      questionInfo: null,
      optionsList: [],
      isBegin: true,
      isOver: false,
      num: 1,
      allNumber: -1,
      wrongNumber: -1,
      isRelevance: '', //来自关联
      userAnswerTxt: '',
      isLookError: false,
      prevWrong: 0,
      nextWrong: 0,
      imgArr: [],
      hasAnswer: false,
      smallNumber: 1,
      hasSmallNum: 0,
      examMainId: -1,
      isFeedback: 0,
      showFirstSpeak: true,
      showLoudspeaker: false,
      processStyle: {
        "background-color": "#fff"
      },
      railStyle: {
        "background": "rgba(255,255,255,0.3)"
      },
      dotOptions: {
        style: {
          border: "1px solid #fff",
        },
      }, //进度条组件样式
      isWeiXin: true,
      dragFlag: false, //进度拖拽
      audioPlayTime: 0,
      playtime: '00:00:00',
      playtotalTime: '00:00:00',
      duration: 0,
      playing: false,
      answerCardList: [], //答题卡
      newCarlistIndex: [], //当前答题卡
      showCar: false,
      nowIndex: 0,
      hasAllCheck:true,
      ancyshowFirstSpeak: true,
      ancyshowLoudspeaker: false,
      ancydragFlag: false, //进度拖拽
      ancyaudioPlayTime:0,
      ancyplaytime: '00:00:00',
      ancyplaytotalTime: '00:00:00',
      ancyduration:0,
      ancyPlaying:false,
      themeColor: localStorage.getItem("colorName") || 'mb5_default',
      tabList:[
        {name:'全部', index:0}, {name:'答对', index:1}, {name:'答错', index:2}, {name:'待批阅', index:3}
      ],
      typeBar:0,
      isRight:0,
      randomFlag:false,
      fbAnswerStyle:[],
      showExamWatermark: false,
      uploadAudioList:[],
      examWatermarkConfig: JSON.parse(localStorage.getItem("examWatermarkConfig")) || '',
      playAduioSrc:'',
      examinationInfo:null,
      selectIndex:0, // 获取其属性
      showSelectModal:false
    };
  },
  computed: {
    cloroRGB() {
      return utilJs.getRgbStr(this.themeColor, '', 0.5);
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
    this.paperMainId = this.$route.query.paperMainId;
    this.topicId = this.$route.query.topicId || '';
    this.isRelevance = this.$route.query.isRelevance || '';
    this.examMainId = this.$route.query.examMainId || -1;
    this.questionType = 1
    this.allNumber = -1;
    this.num = this.$route.query.num;
    this.isLookError = false;
    this.prevWrong = 0;
    this.nextWrong = 0;
    this.imgArr = [];
    this.answerCardList = []
    this.newCarlistIndex = []
    this.hasAnswer = false;
    this.smallNumber = 1;
    this.hasSmallNum = 0;
    this.nowIndex = 0
    this.uploadAudioList = []
    this.hasAllCheck = true
    this.ancyshowFirstSpeak = true
    this.showLoudspeaker = false
    this.ancyshowLoudspeaker = false
    this.ancyaudioPlayTime = 0
    this.playAduioSrc = ''
    this.pauseTimeControl();
    let $this = this;
    this.getQuestion()
    this.showCar = false
    this.showExamWatermark = localStorage.getItem('enableExamWatermark') && localStorage.getItem('enableExamWatermark') == '1' ? true : false;
    if (!this.topicId) {
      utilJs.getMethod(
        global.apiurl + "paper/detail/" + this.paperMainId,
        res => {
          if (res.isGrounding == 0) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                info: "很抱歉，该考试不存在"
              }
            });
          }
          if ((res.price * 1 > 0 && res.isGrounding == -1 && !res.permission) || (res.price * 1 == 0 && res.isGrounding == -1)) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                info: '很抱歉，该考试已下架'
              }
            })
          }
          $this.examinationInfo = res
          this.wechatShare();
        }
      );
      return;
    }
    utilJs.getMethod(global.apiurl + 'exam/topicDetail/' + this.topicId, function (res) {
      if ($this.isRelevance != 1 && res.permission != 1) {
        $this.$routerGo($this, "push", {
          path: "/homePage/examination/examinationDetail",
          query: { ExaminationNo: $this.topicId }
        });
      }

      $this.examinationInfo = res.topicInfo;

      $this.wechatShare();
    })
  },
  deactivated() {
    if (player) {
      destoryPlayer(player);
      player = null;
    }
    if (ancyPlayer) {
      destoryPlayer(ancyPlayer);
      ancyPlayer = null;
    }
  },
  beforeRouteLeave(to, from, next) {
    if (player) {
      destoryPlayer(player);
      player = null;
    }
    if (ancyPlayer) {
      destoryPlayer(ancyPlayer);
      ancyPlayer = null;
    }
    next();
  },
  activated() {
    setDocumentTitle("答题解析");// eslint-disable-line
    this.isWeiXin = utilJs.isWeiXin();
  },
  methods: {
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audioSelf");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audioSelf").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      if (this.playAduioSrc && this.playAduioSrc.includes("https")) {
        document.getElementById("audioSelf").src = this.playAduioSrc;
        audio.play();
      }
    },

    //监听音频播放结束执行的内容
    playAudioSelfEnd() {
      this.playAduioSrc = "";
      document.getElementById("audioSelf").src = this.playAduioSrc;
    },
    changeType(index) {
      this.typeBar = index;
      if (index == 0) {//全部
        this.questionType = 1
        this.isRight = 0
      } else if (index == 1) {//做对
        this.questionType = 2
        this.isRight = 1
      } else if (index == 2) {//做错
        this.questionType = 2
        this.isRight = -1
      } else if (index == 3) {//未批阅
        this.questionType = 2
        this.isRight = 2
      }
      // this.newAnswerCard(this.isRight)
      this.clickOnlyLook()
    },
    goAnalysis(num, examDetailId) {
      this.num = num
      this.showCar = false
      if (this.questionType == 2) {
        this.num = examDetailId
      }
      this.getQuestion();
    },
    pauseTimeControl() {
      if (player) {
        player.pause();
      }
      if (ancyPlayer) {
        ancyPlayer.pause();
      }
      if (document.getElementById("audio").src != '') {
        document.getElementById('audio').pause();
        this.showFirstSpeak = true
      }
      if (document.getElementById("ancyaudio").src != '') {
        this.ancyshowFirstSpeak = true
        document.getElementById('ancyaudio').pause();
      }
    },
    hideColumnList() {
      this.showCar = false
    },
    showNewAnswerCard() {
      this.newAnswerCard(this.isRight)
      this.showCar = true
    },
    newAnswerCard(type) {
    /*获取答题卡数据*/
      let $this = this
      utilJs.getMethod(global.apiurl + 'paper/answerSheet/' + this.examMainId + '?isRight=' + type, function (res) {
        $this.answerCardList = res.ordinarySheet.length > 0 ? res.ordinarySheet : res.randomSheet
        if (res.randomSheet.length > 0) {
          $this.randomFlag = true
        } else {
          $this.randomFlag = false
        }
        // if (time == 1) {
        //   $this.getQuestion()
        // }
      });
    },
    cancerWrong() {
      let $this = this;
      this.$cjConfirm({
        message: '确定从错题集中删除该题',
        onConfirm:() => {
          this.$loading.show({
            text: "删除中..."
          });
          let urlT = global.apiurl + 'exam/removeCollection/' + this.questionInfo.collectId;
          utilJs.getMethod(urlT, function () {
            $this.getQuestion();
            $this.$loading.hide();
            // $this.removeStatus = 1;
          });
        }
      })
    },
    addWrong() {
      if (this.questionInfo.type == 3 || this.questionInfo.smallType == 3 || (this.questionInfo.type == 9 && this.questionInfo.realType == 3)) { //问答题不能加入错题集
        return;
      }
      let data = {
        paperMainId: this.paperMainId,
        topicId: this.topicId,
        paperDetailId: this.questionInfo.paperDetailId,
        parentId: this.questionInfo.parentId,
        userAnswer: this.questionInfo.userAnswer1,
        examMainId:this.examMainId
      };
      utilJs.postMethod(`${global.apiurl}exam/joinToCollection`, data, () => {
        this.$showCjToast({
          text: "成功加入错题集",
          type: "success",
        });
        this.getQuestion();
      });
    },
    clickOnlyLook() {
      //点击只看错题或查看全部测试
      // if (this.wrongNumber == 0) {
      //   return false;
      // } else {
        this.num = 1;
        this.smallNumber = 1
        // this.isLookError = !this.isLookError;
        // if (this.questionType == 1) {
        //   this.questionType = 2;
        // } else if (this.questionType == 2) {
        //   this.questionType = 1;
        // }
        // this.newAnswerCard(this.questionType)
        this.nowIndex = 0
        this.getQuestion();
      // }
    },
    initQPlayer() {
      let videoObj = {
        videoMp4: this.questionInfo.resourceUrl,
        videoM3U8: this.questionInfo.resourceUrl,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../public/i/wap/index/poster.png")
      };
      player = getXgplayer("liveVideoIntroParent", videoObj);
      player.on('ready', () => {
        if (document.querySelector(".xgplayer-start")) {
          document.querySelector(".xgplayer-start").style.zIndex = 99;
        }
      })
      player.on("play", () => {
        if (ancyPlayer) {
          ancyPlayer.pause();
        }
        if (document.getElementById("ancyaudio").src != '') {
          this.ancyshowFirstSpeak = true
          document.getElementById('ancyaudio').pause();
        }
      });
      if (document.querySelector(".xgplayer-start")) {
        document.querySelector(".xgplayer-start").style.zIndex = '99';
      }
    },
    initQPlayerAncy() {
      let videoObj = {
        videoMp4: this.questionInfo.analysisRurl,
        videoM3U8: this.questionInfo.analysisRurl,
        autoplay: false,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../public/i/wap/index/poster.png")
      };
      ancyPlayer = getXgplayer("ancyVideoIntroParent", videoObj);
      if (document.querySelector(".xg-start")) {
        document.querySelector("xg-start").style.zIndex = '98';
      }
      ancyPlayer.on('ready', () => {
        if (document.querySelector(".xg-start")) {
          document.querySelector("xg-start").style.zIndex = 98;
        }
      })
      ancyPlayer.on("play", () => {
        if (player) {
          player.pause();
        }
        if (document.getElementById("audio").src != '') {
          document.getElementById('audio').pause();
          this.showFirstSpeak = true
        }
        console.log('-------------play-------------')
      });
    },
    Videoplay() {
      if (this.questionInfo.resourceUrl) {
        player.play()
        this.playing = true
      }
    },
    VideoplayAncy() {
      if (this.questionInfo.analysisRurl) {
        ancyPlayer.play()
        this.ancyPlaying = true
      }
    },
    clickDesc(e) {
      if (e.target.tagName == 'IMG' && e.target.src) {
        wxUtilJs.previewImage({
          current: e.target.src, // 当前显示图片的http链接
          urls: [e.target.src] // 需要预览的图片http链接列表
        });
      }
    },
    getQuestion() {
      this.optionsList = [];
      this.imgArr = [];
      this.questionInfo = null;
      this.hasAnswer = false;
      let $this = this;
      this.showFirstSpeak = true;
      this.showLoudspeaker = false;
      this.audioPlayTime = 0;
      this.playtime = '00:00:00';
      this.playtotalTime = '00:00:00';
      this.duration = 0;
      let urlT = '';
      this.playing = false
      this.ancyshowFirstSpeak = true
      this.ancyshowLoudspeaker = false;
      this.ancyaudioPlayTime = 0;
      this.ancyplaytime = '00:00:00';
      this.ancyplaytotalTime = '00:00:00';
      this.ancyduration = 0;
      this.ancyPlaying = false
      this.fbAnswerStyle = []
      this.selectIndex = 0, // 获取其属性
      this.showSelectModal = false
      clearInterval(ancyplayTimeControl);
      clearInterval(playTimeControl);
      if (!document.getElementById('audio').ended) {
        document.getElementById("audio").pause();
      }
      if (!document.getElementById('ancyaudio').ended) {
        document.getElementById("ancyaudio").pause();
      }
      if (this.questionType == 1) {
        urlT = global.apiurl + 'exam/analysis/' + this.examMainId + '?number=' + this.num + '&topicId=' + this.topicId + '&smallNumber=' + this.smallNumber; //查看全部问题
      } else if ((this.questionType == 2) && (this.num == 1)) {
        urlT = global.apiurl + 'exam/newErrorProblem/' + this.examMainId + '?topicId=' + this.topicId + '&isRight=' + this.isRight; //只看错误问题
      } else if (this.questionType == 2) {
        urlT = global.apiurl + 'exam/newErrorProblem/' + this.examMainId + '?topicId=' + this.topicId + '&examDetailId=' + this.num + '&isRight=' + this.isRight; //只看错误问题
      }
      utilJs.getMethod(urlT, function (res) {
        $this.questionInfo = res;
        //题号与当前点击题号对应
        for (let i = 0; i < $this.answerCardList.length; i++) {
          for (let j = 0; j < $this.answerCardList[i].length; j++) {
            if ($this.questionInfo.number == $this.answerCardList[i][j].number) {
              $this.nowIndex = i
            }
          }
        }
        $this.newCarlistIndex = $this.answerCardList[$this.nowIndex]
        $this.isFeedback = res.isFeedback
        $this.uploadAudioList = res.audioArr
        if ($this.questionType == 1) {
          $this.examMainId = res.examMainId;
        }
        if ($this.questionInfo.type == 9) {
          $this.hasSmallNum = $this.questionInfo.hasSmallNum;
        }
        if (player) {
          destoryPlayer(player);
          player = null;
        }
         if (ancyPlayer) {
          destoryPlayer(ancyPlayer);
          ancyPlayer = null;
        }
        if ($this.questionInfo.status == 1 && $this.questionInfo.resourceUrl != '' && $this.questionInfo.resourceType == 1) {
          $this.$nextTick(function () {
            $this.initQPlayer();
          })
        }
        if ($this.questionInfo.status == 1 && $this.questionInfo.analysisRurl && $this.questionInfo.analysisRurl != '' && $this.questionInfo.analysisRtype == 1) {
          $this.$nextTick(function () {
            $this.initQPlayerAncy();
          })
        }
        let audio = document.getElementById("audio");
        audio.src = '';
        if ($this.questionInfo.resourceUrl != '' && $this.questionInfo.resourceType == 2) {
          audio.src = $this.questionInfo.resourceUrl;
          document.getElementById('audio').removeEventListener('timeupdate', $this.audioTimeUpdate);
          document.getElementById('audio').removeEventListener('canplay', $this.audioCanPlay);
          document.getElementById('audio').addEventListener('timeupdate', $this.audioTimeUpdate);
          document.getElementById('audio').addEventListener('canplay', $this.audioCanPlay);
        }
        let ancyaudio = document.getElementById("ancyaudio");
        ancyaudio.src = '';
        if ($this.questionInfo.analysisRurl != '' && $this.questionInfo.analysisRtype == 2) {
          // $this.$nextTick(function () {
          ancyaudio.src = $this.questionInfo.analysisRurl;
          document.getElementById('ancyaudio').removeEventListener('timeupdate', $this.ancyAudioTimeUpdate);
          document.getElementById('ancyaudio').removeEventListener('canplay', $this.ancyAudioCanPlay);
          document.getElementById('ancyaudio').addEventListener('timeupdate', $this.ancyAudioTimeUpdate);
          document.getElementById('ancyaudio').addEventListener('canplay', $this.ancyAudioCanPlay);
          // })
        }
        if ($this.questionInfo.type == 1 || $this.questionInfo.type == 2 || $this.questionInfo.smallType == 1 || $this.questionInfo.smallType == 2 || ($this.questionInfo.type == 9 && ($this.questionInfo.realType == 1 || $this.questionInfo.realType == 2))) {
          if ($this.questionInfo.userAnswer == null || $this.questionInfo.userAnswer == '') {
            $this.userAnswerTxt = '';
          } else {
            $this.userAnswerTxt = $this.questionInfo.userAnswer.join("");
          }
        } else if ($this.questionInfo.type == 4 || $this.questionInfo.smallType == 4 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 4)) {
          if ($this.questionInfo.userAnswer == '1') {
            $this.userAnswerTxt = '正确';
          } else if ($this.questionInfo.userAnswer == '-1') {
            $this.userAnswerTxt = '错误';
          } else {
            $this.userAnswerTxt = '';
          }
        }
        if ($this.questionType == 1) {
          $this.allNumber = $this.questionInfo.allNumber;
          $this.wrongNumber = $this.questionInfo.wrongNum;
        } else if ($this.questionType == 2) {
          $this.prevWrong = $this.questionInfo.beforeId;
          $this.nextWrong = $this.questionInfo.nextId;
        }
        if ($this.questionInfo.type == 5 || $this.questionInfo.smallType == 5 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 5)) {
          for (let item of $this.questionInfo.userAnswer) {
            if (item.value != '') {
              $this.hasAnswer = true;
            }
          }
        }
        if ($this.questionInfo.type == 4 || $this.questionInfo.smallType == 4 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 4)) {
          $this.questionInfo.optionA = "正确";
          $this.questionInfo.optionB = "错误";
        }
        if ($this.questionInfo.type == 1 || $this.questionInfo.type == 2 || $this.questionInfo.type == 11 || $this.questionInfo.type == 4 || $this.questionInfo.smallType == 1 || $this.questionInfo.smallType == 2 || $this.questionInfo.smallType == 4 || ($this.questionInfo.type == 9 && ($this.questionInfo.realType == 1 || $this.questionInfo.realType == 2 || $this.questionInfo.realType == 4))) {
          const optionArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
          for (let i = 0; i < 10; i++) {
            let optionSty = `option${optionArr[i]}`;
            if ($this.questionInfo[optionSty] != '' && $this.questionInfo[optionSty] != null) {
              $this.optionsList.push({ type: optionArr[i], name: $this.questionInfo[optionSty], isSelected: 0 });
            }
          }
        }
        if ($this.questionInfo.type == 11) {
          let str = $this.questionInfo.problem;
          // match 方法返回匹配的数组
          let res = str.match(/\{\{[\d}]*?\}\}/g);
          let count = !res ? 0 : res.length;
          if ($this.questionInfo.userAnswer == null || $this.questionInfo.userAnswer == '' || ($this.questionInfo.userAnswer.length == 1 && $this.questionInfo.userAnswer[0].value == '')) {
            for (let k = 0; k < count; k++) {
              $this.questionInfo.userAnswer[k] = {value : "", key : ""}
            }
          }
          for (let i = 0; i < count; i++) {
            $this.questionInfo.problem = $this.questionInfo.problem.replace(/\{\{[\d}]*?\}\}/, function() {
              let match = '<span name=' + count + ' class="c-lh36 c-mh10 c-ww160 c-inlineblack c-bd0 c-br0 c-fc-mblue c-textAlign-c c-ph10 c-p c-bg-white" style="text-align-last: center;font-size: 0.7rem;border-bottom:1px solid">'
              if ($this.questionInfo.userAnswer[i] && $this.questionInfo.userAnswer[i].value != '') {
                match += "<span class='c-textAlign-c selectClass' selected='selected' value=" + i + ">" + $this.questionInfo.userAnswer[i].value + "</span>"
              } else {
                match += "<span class='c-textAlign-c selectClass' value=" + i + ">未答题</span>"
              }
              match += '</span>'
              return match
            })
            $this.$nextTick(function () {
              $this.bineSelect();
            })
          }

        }
        if ($this.questionInfo.type == 1 || $this.questionInfo.type == 2 || $this.questionInfo.smallType == 1 || $this.questionInfo.smallType == 2 || ($this.questionInfo.type == 9 && ($this.questionInfo.realType == 1 || $this.questionInfo.realType == 2))) {
          if ($this.questionInfo.userAnswer != null) {
            for (let i = 0; i < $this.questionInfo.userAnswer.length; i++) {
              let ArrText = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
              let arrindex = $this.questionInfo.userAnswer[i]
              if ($this.questionInfo.enableShowAnswer == 2 || ($this.questionInfo.enableShowAnswer == 1 && $this.questionInfo.examIsCheck == 1)) {
                if (ArrText.indexOf(arrindex) != -1) {
                  $this.optionsList[ArrText.indexOf(arrindex)].isSelected = 1;
                  $this.optionsList[ArrText.indexOf(arrindex)].type = ArrText[ArrText.indexOf(arrindex)];
                }
              } else {
                if (ArrText.indexOf(arrindex) != -1) {
                  $this.optionsList[ArrText.indexOf(arrindex)].isSelected = 3;
                  $this.optionsList[ArrText.indexOf(arrindex)].type = ArrText[ArrText.indexOf(arrindex)];
                }
              }
            }
          }
          if ($this.questionInfo.enableShowAnswer == 2 || ($this.questionInfo.enableShowAnswer == 1 && $this.questionInfo.examIsCheck == 1)) {
            for (let i = 0; i < $this.questionInfo.rightAnswer.length; i++) {
              let ArrText = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
                let arrindex = $this.questionInfo.rightAnswer[i]
                if (ArrText.indexOf(arrindex) != -1) {
                  $this.optionsList[ArrText.indexOf(arrindex)].isSelected = 2;
                  $this.optionsList[ArrText.indexOf(arrindex)].type = ArrText[ArrText.indexOf(arrindex)];
                }
            }
          }
        } else if ($this.questionInfo.type == 4 || $this.questionInfo.smallType == 4 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 4)) {
          if ($this.questionInfo.userAnswer != null) {
            if ($this.questionInfo.enableShowAnswer == 2 || ($this.questionInfo.enableShowAnswer == 1 && $this.questionInfo.examIsCheck == 1)) {
              if ($this.questionInfo.userAnswer == '1') {
                $this.optionsList[0].isSelected = 1;
                $this.optionsList[0].type = 'A';
              } else if ($this.questionInfo.userAnswer == '-1') {
                $this.optionsList[1].isSelected = 1;
                $this.optionsList[1].type = 'B';
              }
            } else {
              if ($this.questionInfo.userAnswer == '1') {
                $this.optionsList[0].isSelected = 3;
                $this.optionsList[0].type = 'A';
              } else if ($this.questionInfo.userAnswer == '-1') {
                $this.optionsList[1].isSelected = 3;
                $this.optionsList[1].type = 'B';
              }
            }
          }
          if ($this.questionInfo.enableShowAnswer == 2 || ($this.questionInfo.enableShowAnswer == 1 && $this.questionInfo.examIsCheck == 1)) {
            if ($this.questionInfo.rightAnswer == '1') {
              $this.optionsList[0].isSelected = 2;
              $this.optionsList[0].type = 'A';
            } else if ($this.questionInfo.rightAnswer == '-1') {
              $this.optionsList[1].isSelected = 2;
              $this.optionsList[1].type = 'B';
            }
          }
        } else if ($this.questionInfo.type == 5 || $this.questionInfo.smallType == 5 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 5)) {
          let fbRightAnswer = JSON.parse(JSON.stringify($this.questionInfo.answer));
          let hasRightAnswer = false;
          for (let i = 0; i < $this.questionInfo.userAnswer.length; i++) {
            if ($this.questionInfo.enableDisorderMatch == 1) {//是否是乱序模式
              for (let j = 0; j < fbRightAnswer.length; j++) {
                  let answerTextArr = []
                  if (fbRightAnswer[j].value.indexOf(";") > -1) {
                    answerTextArr = fbRightAnswer[j].value.split(";")
                  } else {
                    answerTextArr.push(fbRightAnswer[j].value)
                  }
                  for (let k = 0; k < answerTextArr.length; k++) {
                    if ($this.questionInfo.userAnswer[i].value.trim() == answerTextArr[k].trim()) {
                      hasRightAnswer = true;
                      fbRightAnswer.splice(j, 1);
                      break;
                    }
                  }
              }
            } else {
                  let answerTextArr = []
                  if (fbRightAnswer[i].value.indexOf(";") > -1) {
                    answerTextArr = fbRightAnswer[i].value.split(";")
                  } else {
                    answerTextArr.push(fbRightAnswer[i].value)
                  }
                  for (let k = 0; k < answerTextArr.length; k++) {
                    console.log($this.questionInfo.userAnswer[i].value.trim(), answerTextArr[k].trim())
                    if ($this.questionInfo.userAnswer[i].value.trim() == answerTextArr[k].trim()) {
                      hasRightAnswer = true;
                      break;
                    }
                  }
                // }
            }
            if ($this.questionInfo.enableShowAnswer == 2 || ($this.questionInfo.enableShowAnswer == 1 && $this.questionInfo.examIsCheck == 1)) {
              if (hasRightAnswer) {
                $this.$set($this.fbAnswerStyle, i, 'right');
              } else {
                $this.$set($this.fbAnswerStyle, i, 'wrong');
              }
            }
            hasRightAnswer = false;
          }
        }
        if ($this.questionInfo.type == 3 || $this.questionInfo.smallType == 3 || ($this.questionInfo.type == 9 && $this.questionInfo.realType == 3)) {
          if ($this.questionInfo.imgArr && $this.questionInfo.imgArr.length > 0) {
            for (let item of $this.questionInfo.imgArr) {
              $this.imgArr.push(item.url);
            }
          }
        }
        if ($this.questionType == 1) {
          if ($this.questionInfo.type == 9) {
            $this.isOver = ($this.num < $this.allNumber || $this.smallNumber < $this.hasSmallNum) ? false : true;
            $this.isBegin = $this.num == 1 && $this.smallNumber == 1 ? true : false;
          } else {
            $this.isOver = $this.num < $this.allNumber ? false : true;
            $this.isBegin = $this.num == 1 ? true : false;
          }
        } else if ($this.questionType == 2) {
          $this.isOver = $this.nextWrong == 0 ? true : false;
          $this.isBegin = $this.prevWrong == 0 ? true : false;
        }
      });
    },
    bineSelect() {
      let btn = document.getElementsByClassName('selectClass')
      Array.from(btn).forEach(element => {
        element.addEventListener('click', this.getSelect);
      });
    },
    getSelect(event) {
      var currentTarget = event.currentTarget; // 指向添加监听器的元素
      this.selectIndex = currentTarget.getAttribute('value'); // 获取其属性
      if (this.questionInfo.userAnswer) {
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'A') {
            this.questionInfo.newOption[this.selectIndex].options[0].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[0].name = 'A';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'B') {
            this.questionInfo.newOption[this.selectIndex].options[1].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[1].name = 'B';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'C') {
            this.questionInfo.newOption[this.selectIndex].options[2].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[2].name = 'C';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'D') {
             this.questionInfo.newOption[this.selectIndex].options[3].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[3].name = 'D';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'E') {
             this.questionInfo.newOption[this.selectIndex].options[4].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[4].name = 'E';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'F') {
             this.questionInfo.newOption[this.selectIndex].options[5].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[5].name = 'F';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'G') {
             this.questionInfo.newOption[this.selectIndex].options[6].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[6].name = 'G';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'H') {
             this.questionInfo.newOption[this.selectIndex].options[7].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[7].name = 'H';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'I') {
             this.questionInfo.newOption[this.selectIndex].options[8].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[8].name = 'I';
          }
          if (this.questionInfo.userAnswer[this.selectIndex].value == 'J') {
             this.questionInfo.newOption[this.selectIndex].options[9].isSelected = 1;
            this.questionInfo.newOption[this.selectIndex].options[9].name = 'J';
          }
      }
          if (this.questionInfo.answer[this.selectIndex].value == 'A') {
            this.questionInfo.newOption[this.selectIndex].options[0].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[0].name = 'A';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'B') {
            this.questionInfo.newOption[this.selectIndex].options[1].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[1].name = 'B';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'C') {
            this.questionInfo.newOption[this.selectIndex].options[2].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[2].name = 'C';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'D') {
            this.questionInfo.newOption[this.selectIndex].options[3].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[3].name = 'D';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'E') {
            this.questionInfo.newOption[this.selectIndex].options[4].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[4].name = 'E';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'F') {
           this.questionInfo.newOption[this.selectIndex].options[5].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[5].name = 'F';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'G') {
            this.questionInfo.newOption[this.selectIndex].options[6].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[6].name = 'G';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'H') {
            this.questionInfo.newOption[this.selectIndex].options[7].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[7].name = 'H';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'I') {
            this.questionInfo.newOption[this.selectIndex].options[8].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[8].name = 'I';
          }
          if (this.questionInfo.answer[this.selectIndex].value == 'J') {
            this.questionInfo.newOption[this.selectIndex].options[9].isSelected = 2;
            this.questionInfo.newOption[this.selectIndex].options[9].name = 'J';
          }
          console.log(this.selectIndex, this.questionInfo.answer[this.selectIndex].value, this.questionInfo.newOption)
      this.showSelectModal = true
    },
    timeToStr(timeSecond) {
      //将秒转化为00:00:00格式
      let hour =
        Math.floor(timeSecond / 3600) >= 10
          ? Math.floor(timeSecond / 3600)
          : "0" + Math.floor(timeSecond / 3600);
      let minute =
        Math.floor((timeSecond % 3600) / 60) >= 10
          ? Math.floor((timeSecond % 3600) / 60)
          : "0" + Math.floor((timeSecond % 3600) / 60);
      let second =
        Math.floor(timeSecond % 60) >= 10
          ? Math.floor(timeSecond % 60)
          : "0" + Math.floor(timeSecond % 60);
      return hour + ":" + minute + ":" + second;
    },
     //开始播放音频
    audioCanPlay(e) {
      isCanPlay = true;
      this.duration = Math.floor(e.target.duration);
      this.duration = Math.floor(document.getElementById('audio').duration)
      this.playtotalTime = this.timeToStr(this.duration)
      console.log("audioCanPlay-----------");
    },
    ancyAudioCanPlay(e) {
      ancyisCanPlay = true;
      this.ancyduration = Math.floor(e.target.duration);
      this.ancyduration = Math.floor(document.getElementById('ancyaudio').duration)
      this.ancyplaytotalTime = this.timeToStr(this.ancyduration)
    },
    audioTimeUpdate() {
      // //如果正在拖动  还不能播放，则不更新时间
      if (this.dragFlag && !isCanPlay) {
        return;
      }
      playTimeControl = setTimeout(() => {
        if (document.getElementById('audio') && Math.floor(document.getElementById('audio').currentTime) > 0) {
          this.audioPlayTime = Math.floor(document.getElementById('audio').currentTime);
          this.playtime = this.timeToStr(this.audioPlayTime)
        }
      }, 200)
      console.log("audioTimeUpdate-----------");
    },
    ancyAudioTimeUpdate() {
      // //如果正在拖动  还不能播放，则不更新时间
      if (this.ancydragFlag && !ancyisCanPlay) {
        return;
      }
      ancyplayTimeControl = setTimeout(() => {
        if (document.getElementById('ancyaudio') && Math.floor(document.getElementById('ancyaudio').currentTime) > 0) {
          this.ancyaudioPlayTime = Math.floor(document.getElementById('ancyaudio').currentTime);
          this.ancyplaytime = this.timeToStr(this.ancyaudioPlayTime)
        }
      }, 200)
    },
    dragStart() {
      this.dragFlag = true;
    },
    ancydragStart() {
      this.ancydragFlag = true;
    },
    inputChange() {
      console.log("inputChange-----------");
      if (this.dragFlag) {
        this.dragFlag = false;
        return;
      }
      document.getElementById('audio').currentTime = this.audioPlayTime;
    },
    ancyinputChange() {
      console.log("inputChange-----------");
      if (this.ancydragFlag) {
        this.ancydragFlag = false;
        return;
      }
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
    },
    dragging() {
      this.dragFlag = true;
      clearInterval(playTimeControl);
      console.log("dragging------");
    },
    ancydragging() {
      this.ancydragFlag = true;
      clearInterval(ancyplayTimeControl);
      console.log("dragging------");
    },
    //拖动结束，更改播放器当前时间，重新开始循环获取当前时间
    dragEnddragEnd() {
      document.getElementById('audio').currentTime = this.audioPlayTime;
      this.dragFlag = false;
      console.log("dragEnd-----------");
    },
    //拖动结束，更改播放器当前时间，重新开始循环获取当前时间
    ancydragEnddragEnd() {
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
      this.ancydragFlag = false;
      console.log("dragEnd-----------");
    },
    firstPlay() {
      this.showFirstSpeak = false;
      this.showLoudspeaker = true;
      this.playRadio();
      if (ancyPlayer) {
        ancyPlayer.pause();
      }
      if (document.getElementById("ancyaudio").src != '') {
        document.getElementById('ancyaudio').pause();
        this.ancyshowFirstSpeak = true
      }
    },
    ancyfirstPlay() {
      this.ancyshowFirstSpeak = false;
      this.ancyshowLoudspeaker = true;
      this.ancyplayRadio();
      if (player) {
        player.pause();
      }
      if (document.getElementById("audio").src != '') {
        document.getElementById('audio').pause();
        this.showFirstSpeak = true
      }
    },
    replay() {
      this.audioPlayTime = 0
      document.getElementById('audio').currentTime = this.audioPlayTime;
      this.showLoudspeaker = true;
      this.playRadio();
      if (ancyPlayer) {
        ancyPlayer.pause();
      }
      if (document.getElementById("ancyaudio").src != '') {
        document.getElementById('ancyaudio').pause();
        this.ancyshowFirstSpeak = true
      }
    },
    ancyreplay() {
      this.ancyaudioPlayTime = 0
      document.getElementById('ancyaudio').currentTime = this.ancyaudioPlayTime;
      this.ancyshowLoudspeaker = true;
      this.ancyplayRadio();
      if (player) {
        player.pause();
      }
      if (document.getElementById("audio").src != '') {
        document.getElementById('audio').pause();
        this.showFirstSpeak = true
      }
    },
    pause() {
      this.showFirstSpeak = true
      document.getElementById("audio").pause();
    },
    ancypause() {
      this.ancyshowFirstSpeak = true
      document.getElementById("ancyaudio").pause();
    },
    playRadio() {
      let audio = document.getElementById("audio");
      if (this.questionInfo.resourceType == 2 && this.questionInfo.resourceUrl != '') {
        if (this.isWeiXin) {
          try {
            document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("audio").play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("audio").play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
          } catch (error) {
            // continue regardless of error
          }
        } else {
          audio.load();
          audio.play();
        }
      }
    },
    ancyplayRadio() {
      let audio = document.getElementById("ancyaudio");
      if (this.questionInfo.analysisRtype == 2 && this.questionInfo.analysisRurl != '') {
        if (this.isWeiXin) {
          try {
            document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("ancyaudio").play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("ancyaudio").play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
          } catch (error) {
            // continue regardless of error
          }
        } else {
          audio.load();
          audio.play();
        }
      }
    },
    playAudioEnd() {
      this.showLoudspeaker = false;
    },
    ancyPlayAudioEnd() {
      this.ancyshowLoudspeaker = false;
    },
    onPlayTimeChange(playTime) {
      this.audioPlayTime = playTime;
    },
    ancyOnPlayTimeChange(playTime) {
      this.ancyaudioPlayTime = playTime;
    },
    playAudioError() {},
    ancyPlayAudioError() {},
    clickPrev() {
      if (this.questionInfo == null || this.questionInfo.length == 0) {
        return;
      }
      //点击上一题
      if (this.questionType == 1) {
        if (this.questionInfo.type == 9) {
          if (this.num <= 1 && this.smallNumber <= 1) {
            return;
          } else if (this.smallNumber > 1) {
            this.smallNumber--;
          } else if (this.num > 1 && this.smallNumber <= 1) {
            this.num--;
            this.smallNumber = 1;
          }
        } else {
          if (this.num <= 1) {
            return;
          }
          this.num--;
          this.smallNumber = 1;
        }
      } else if (this.questionType == 2) {
        if (this.prevWrong == 0) {
          return;
        }
        this.num = this.prevWrong;
      }
      this.getQuestion();
    },
    wrongFeedback() {
      let $this = this
      this.$cjConfirm({
        title: '反馈提示',
        titleCenter: true, //标题是否居中
        message: '确认当前题目有误，反馈给老师！', //弹窗内容
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          utilJs.postMethod(global.apiurl + 'exam/feedbackError', {
            paperMainId: $this.paperMainId,
            paperDetailId: $this.questionInfo.questionId,
            testPaperType: $this.questionInfo.paperInfo.testPaperType
          },
            res => {
              $this.$showCjToast({
                text: res,
                type: "success"
              });
              $this.isFeedback = 1
            },
            () => {
            }
          )
        }, //确认事件回调
        onCancel: null, //取消事件回调
      })
    },
    clickNext() {
      if (this.questionInfo == null || this.questionInfo.length == 0) {
        return;
      }
      //点击下一题
      if (this.questionType == 1) {
        if (this.questionInfo.type == 9) {
          if (this.num >= this.allNumber && this.smallNumber >= this.hasSmallNum) {
            return;
          } else if (this.num < this.allNumber && this.smallNumber >= this.hasSmallNum) {
            this.num++;
            this.smallNumber = 1;
          } else if (this.smallNumber < this.hasSmallNum) {
            this.smallNumber++;
          }
        } else {
          if (this.num >= this.allNumber) {
            return;
          }
          this.num++;
          this.smallNumber = 1;
        }
      } else if (this.questionType == 2) {
        if (this.nextWrong == 0) {
          return;
        }
        this.num = this.nextWrong;
      }
      this.getQuestion();
    },
    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl) {
        return;
      }
      let $this = this;
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: $this.imgArr // 需要预览的图片http链接列表
      });
    },
    //分享
    wechatShare: function () {
      let title = this.examinationInfo.shareTitle;
      let shareImg = this.examinationInfo.sharePic || require('@/assets/examination_defult.png');
      let shareDesc = this.examinationInfo.shareDesc;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      let shareUrl = ''
      if (this.topicId) {
        shareUrl = `${window.location.href.split("#")[0]}#/homePage/examination/examinationDetail?ExaminationNo=${this.topicId}&refereeId=${localStorage.getItem("userId")}`;
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#/homePage/testPaper/testDetail?testId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      }
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = this.examinationInfo.shareTitle;
      let shareImg = this.examinationInfo.sharePic || require('@/assets/examination_defult.png');
      let shareUrl = ''
      if (this.topicId) {
        shareUrl = window.location.href.split("#")[0] + '#/homePage/examination/examinationDetail?ExaminationNo=' + this.topicId + '&refereeId=' + localStorage.getItem("userId");
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#/homePage/testPaper/testDetail?testId=${this.paperMainId}&refereeId=${localStorage.getItem("userId")}`;
      }

      var shareDesc = this.examinationInfo.shareDesc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.op-type {
  flex-shrink: 0;
}
.tiny-style {
  font-size: 0.6rem !important;
  color: #333 !important;
}
.bd-e6 {
  border: 1px solid #e6e6e6;
}
.c-bd1-d7{
  border: 1px solid #d7d7d7;
}
.bg-fa {
  background-color: #fafafa;
}
.bd-xblue {
  border: 1px solid #2194ff;
}
.bg-e6 {
  background-color: #e6e6e6;
}
.chanDeg{
  display: inline-block;
  transform: rotate(180deg)
}
.examAnswer img{display: inline; vertical-align: middle;}
.Analysis img{
  display: block
}
.c-whiteOpcity03{
background: rgba(255,255,255,0.3);
}
.dot-inner {
  position: relative;
  background: rgba(255,255,255,1);
}
.audioPlay /deep/ .vue-slider-dot {
  width: auto !important;
  height: auto !important;
}
.c-ww54 {
  width: 1.35rem;
}
#liveVideoIntroParent{
  width: 100% !important;
}
#ancyVideoIntroParent {
  width: 100% !important;
}
#ancyVideoIntroParent /deep/ .xgplayer-start{
  z-index: 99;
}
.questionListBox{
  border-radius: 0 0 0.5rem 0.75rem;
  box-shadow: 0 0.2rem 0.5rem 0 rgba(0,0,0,0.06);
}
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-right: 1.1rem;
  height: 0.15rem;
  width: 0.8rem;
  border-radius: 3px;
}
.noChoose {
  border: 1px solid #e5e5e5;
}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.rightClass{
  color: #6c83ff;
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.choose {
  color: #fff;
  background-color: #6c83ff;
}
.right {
  color: #39C564;
}
.worron {
  color: #FF0000;
}
.borderRight {
  border: 1px solid #39C564;
  background-color: rgba(113, 219, 119, 0.1);
}
.borderUser {
  border: 1px solid #FF0000;
  background-color: rgba(255, 0, 0, 0.1);
}
.analysisTypeUser {
  background: #FD6167;
  color: #fff;
}
.analysisTypeRight {
  background: #39C564;
  color: #fff;
}
.analysisRight {
  border: 2px solid #39C564;
  background-color: rgba(113, 219, 119, 0.1);
}
.analysisUser {
  border: 2px solid #FF0000;
  background-color: rgba(255, 0, 0, 0.1);
}
.c-mr68 {
  margin-right: 1.7rem;
}
</style>


